<template>
	<el-dialog :visible.sync="addVisible" @close="$emit('update:addVisible',false)" width="55%" :show-close='false' class="verfiyQcDialog"
	 :closeOnClickModal='false'>
		<span slot="title" class="dialog-title">
		  	验证质控
			<el-button  size="mini" @click="close" class="popupClose">关闭</el-button>
		</span>
		<div v-if = "isSuccess"  style = "text-align:center;line-height:70px;color:#67C23A;font-size:18px;">
			<i class="el-icon-success"></i>	{{tip}}
		</div>
		<div v-if = "!isSuccess" style = "text-align:left;line-height:35px;">
			<p style = "font-size:18px;color:red;text-align:center">{{tip}}</p>
			<div v-for="(item,index) in failList" :key="index" class="text item"   >
				<i class="el-icon-warning" style = "color:red"></i>	
			{{item.relateInfo}}
			</div>
		</div>
		
	</el-dialog>
</template>

<script>
	import $ from 'jquery'
	import { mapState } from 'vuex'


	export default {
		data() {
			return {
				tip:'',
				isSuccess:true

			}
		},
		watch: {
			addVisible(val) {
				if (val) {
					this.verifyEnterData();

				}

			}
		},
		props: ['addVisible', 'testpanelData'],
		components: {

		},
		mounted() {

		},
		computed: {
			...mapState(['tableHeightA']),
		},
		methods: {
			verifyEnterData() {
				 this.$http({
					method: 'post',
					apiUrl: '/detection/verifyEnterData.htm',
					params: this.testpanelData,
					isJson: true
				}).then(res => {
					if(res.code == 0){
						this.isSuccess = res.data.success
						if(res.data.success){
							this.tip = "验证通过"
						}else{
							this.tip = "验证不通过"
							this.failList = res.data.failList
						}
					}

				})
			},
			close() {
				
				this.$emit('update:addVisible', false)
				this.tip = '';
				this.isSuccess = true;
			}
		}
	}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.verfiyQcDialog .el-dialog {

		height: 70%;
	}
	.verfiyQcDialog .el-dialog .el-dialog__body {
		height: calc(100% - 55px);
		padding: 10px 18px;
		overflow-y: auto;
	}
</style>